<template>
	<view class="container">
		<navbar :config="config" backColor="#000"></navbar>
		<view class="timeView">
			<view class="zhifuView">支付剩余时间</view>
			<uni-countdown :backgroundColor="'none'" :color="'#FF211F'" :splitorColor="'#FF211F'"
				:show-day="time1[0] > 0" :day="time1[0]" :hour="time1[1]" :minute="time1[2]" :second="time1[3]">
			</uni-countdown>
		</view>
		<view class="u-text-center ">
			<view>
				<view class="moneyView">
					￥
					<text class="">{{ total_amount }}</text>
				</view>
				<view class="payNumber">付款金额</view>
			</view>
			<radio-group>
				<label @click="payWay(0)">
					<view class="yuePay">
						<view class="yuePayView">
							<image :src="imgUrl+'/pay/one.png'" class="payOneImage"></image>
							<view class="yuePayCenter">
								<text>余额支付</text>
								<text>可用金额 ¥ {{ balance || 0 }}</text>
							</view>
						</view>
						<radio value="0" activeBackgroundColor="#FF211F" inactive-color="#AAAAAA" />
					</view>
				</label>
				<view class="otherPay">其他支付方式</view>
				<label class="u-flex-center-sb" @click="payWay(19)" v-if="this.exchangeType == 'voucher'">
					<view class="u-flex-center">
						<text class="iconfont3 pay">&#x100dc;</text>
						<!-- <image class="img60" :src="imgUrl + '/weChat2.png'"></image> -->
						<view class="u-ml20 u-font28 u-474747">
							兑换券支付<text class="u-font24 u-AAAAAA">（可用兑换券 ¥ {{ voucher || 0 }}）</text>
						</view>
					</view>
					<view>
						<radio value="19" color="#FF721B" inactive-color="#AAAAAA" />
					</view>
				</label>
				<view class="labelFView">
					<!--					<label @click="payWay(1)">-->
					<label @click="payWay(17)">
						<view class="payLabel">
							<view class="PayLabelItem">
								<image :src="imgUrl+'/pay/two.png'" class="payTwo"></image>
							</view>
							<view class="yuePayViewOther" style="border-bottom: 2rpx solid #f5f5f5;">
								<view class="">微信支付</view>
								<radio value="1" checked activeBackgroundColor="#6BCC03" inactive-color="#AAAAAA" />
							</view>
						</view>
					</label>
					<!--					<label @click="payWay(2)">-->
					<label @click="payWay(16)">
						<view class="payLabel">
							<view class="PayLabelItem">
								<image :src="imgUrl+'/pay/three.png'" class="payTwo"></image>
							</view>
							<view class="yuePayViewOther" style="border-bottom: 2rpx solid #f5f5f5;">
								<view class="">支付宝支付</view>
								<radio value="1" checked activeBackgroundColor="#0092FE" inactive-color="#AAAAAA" />
							</view>
						</view>
					</label>
					<label @click="payWay(21)">
						<view class="payLabel">
							<view class="PayLabelItem">
								<image src="../../static/bankCard.png" class="payTwo"></image>
							</view>
							<view class="yuePayViewOther" style="border-bottom: 2rpx solid #f5f5f5;">
								<view class="">快捷支付</view>
								<radio value="1" checked activeBackgroundColor="#6BCC03" inactive-color="#AAAAAA" />
							</view>
						</view>
					</label>
				</view>
				<!-- <label class="u-flex-center-sb u-mt30" @click="payWay(10)">
            <view class="u-flex-center">
              <image class="img60" :src="imgUrl+'/alipay.png'"></image>
              <view class="u-ml20 u-font28 u-181818">支付宝（Adapay）</view>
            </view>
            <view>
              <radio value="2" />
            </view>
          </label> -->
				<!-- <label class="u-flex-center-sb u-mt30" @click="payWay(14)">
            <view class="u-flex-center">
              <view class="iconfont3 bank-icon">&#xe607;</view>
              <view class="u-ml20 u-font28 u-181818">银行卡支付</view>
            </view>
            <view>
              <radio value="14" />
            </view>
          </label>
          <label class="u-flex-center-sb u-mt30" @click="payWay(12)">
            <view class="u-flex-center">
              <image class="img60" :src="imgUrl+'/alipay.png'"></image>
              <view class="u-ml20 u-font28 u-181818">支付宝（慧收钱）</view>
            </view>
            <view>
              <radio value="12" />
            </view>
          </label> -->
				<!-- 					<label class="u-flex-center-sb u-mt30" @click="payWay(3)">
						<view class="u-flex-center">
							<image class="img60" :src="imgUrl + '/money.png'"></image>
							<view class="u-ml20 u-font28 u-181818">
								余额支付
								<text class="u-font24 u-999">（可用余额 ¥ {{ balance }}）</text>
							</view>
						</view>
						<view><radio value="3" /></view>
					</label> -->
				<template v-if="banksList.length && false">
					<label class="u-mt30 bank" @click="payBankWay(14, item.id)" v-for="(item, index) in banksList"
						:key="item.id">
						<view class="box">
							<view class="left">
								<image :src="item.logo" mode="widthFix"></image>
								<text class="bank_name">{{item.local_bank_name || item.bank_name}}</text>
								<text>{{item.local_bank_card_type_name}}</text>
							</view>
							<view class="name">（{{$mUtil.bankAccount(item.card_id)}}）</view>
						</view>
						<view>
							<radio :value="String(item.id)" />
						</view>
					</label>
				</template>
			</radio-group>
			<!-- <label class="u-flex-center-sb u-mt50 banks" @click="banksHandler()">
          <view class="u-flex-center">
            <u-icon name="plus" color="#9A9A9A"></u-icon>管理银行卡
          </view>
        </label> -->
			<view class="pay-btn">
				<button class=" u-flex-center u-btn-two" @click="$u.throttle(submitPay, 500)">
					<view class=" u-flex-center">
						<view class="u-mr10">去付款</view>

					</view>
				</button>
				<!-- <button class=" u-flex-center u-btn-two" v-if="payStatus == 14" @click="showBanksModel = true">
          <view class=" u-flex-center">
            <view>选择快捷银行卡支付</view>
            <uni-countdown :backgroundColor="'none'" :color="'#ffffff'" :splitorColor="'#ffffff'"
              :show-day="time1[0] > 0" :day="time1[0]" :hour="time1[1]" :minute="time1[2]" :second="time1[3]">
            </uni-countdown>
          </view>
        </button> -->
				<view class="minuteView">
					<view>
						请在
						<!-- </view> {{$mUtil.patTime(expired_pay_time)}}<view> -->
						<!-- </view> {{payMinutes}}<view> -->
					</view>
					{{ payMinutes }}
					<view>分钟内完成付款，否则订单失效。</view>
				</view>
			</view>
		</view>
		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
		<!-- 银行卡弹窗 -->
		<u-popup v-model="showBanksModel" mode="bottom" height="65%" border-radius="20" closeable safe-area-inset-bottom
			:mask-close-able="false" z-index="500">
			<view class="banks-content">
				<!-- <view class="add" @click="banksHandler()">+ 管理银行卡</view> -->
				<view class="header">银行卡支付</view>
				<template>
					<view class="banks" v-if="bankListData.length > 0">
						<scroll-view class="scroll-box" scroll-y="true">
							<radio-group>
								<label class="item" :class="{'gray': !item.valid}" v-for="(item, index) in bankListData"
									:key="item.id" @click="quickPay(item)">
									<view class="box">
										<!-- <image :src="item.logo" mode="widthFix"></image> -->
										<text class="bank_name">{{item.issuer}}</text>
										<radio :value="String(item.id)" :checked="card_id == item.id" />
										<!-- <text>{{item.local_bank_card_type_name}}</text> -->
									</view>
									<!-- <view class="box"> -->
									<!-- <view class="name">（{{$mUtil.bankAccount(item.card_id)}}）</view> -->

									<!-- </view> -->
								</label>
							</radio-group>
						</scroll-view>
					</view>
					<noData v-if="bankListData.length <= 0"></noData>
				</template>
				<!-- <view class="banks-pay" @click="$u.throttle(submitPay, 500)" v-if="bankListData.length">
					<text class="txt">确认支付</text>
					<uni-countdown :backgroundColor="'none'" :color="'#ffffff'" :splitorColor="'#ffffff'"
						:show-day="time1[0] > 0" :day="time1[0]" :hour="time1[1]" :minute="time1[2]" :second="time1[3]">
					</uni-countdown>
				</view> -->
				<view class="banks-pay" @click="banksHandler()">
					<text class="txt">请添加银行卡</text>
				</view>
			</view>
		</u-popup>
		<!-- :async-close="true" -->
		<u-modal v-model="confirmModel" ref="confirmPayModel" title="提示" z-index="900"
			:show-cancel-button="true" @confirm="confirmPayConfirm" @cancel="confirmPayCancel">
			<view class="slot-content">
				<view class="paybody">
					<view class="header-text">
						<view>确认使用当前银行卡支付?</view>
					</view>
				</view>
			</view>
		</u-modal>
		<u-modal v-model="showPayModel" ref="payModel" title="为了您的资金交易安全" :async-close="true" z-index="900"
			:show-cancel-button="true" @confirm="payConfirm" @cancel="payCancel">
			<view class="slot-content">
				<view class="paybody">
					<view class="header-text">
						<text>已经向您的银行卡预留手机号 {{ phone }}发送验证码，请注意查收</text>
					</view>
					<view class="sms">
						<u-input v-model="sms_code" type="number" maxlength="6" :clearable="false"
							placeholder="请输入预留手机号验证码" />
						<view class="retry-gary" :class="{'retry': codeCount > 0}" @click="retrySms()"><text
								v-if="codeCount > 0">{{codeCount}}S后</text>重发</view>
					</view>
					<!-- <u-message-input mode="bottomLine" :maxlength="6"></u-message-input> -->
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	let timer
	// let iPay = 0
	let payTimer
	import noData from "@/components/noData/nodata.vue"
	import {
		log
	} from "mathjs";

	// 获取 module
	var kqUniFusedPayApi = uni.requireNativePlugin("KqUniFusedPayApi")
	const modal = uni.requireNativePlugin('modal');
	var that = this;

	export default {
		created() {
			// this.payWay(1);
			this.payWay(21);

		},
		components: {
			noData
		},
		data() {
			return {

				config: {
					back: true, //false是tolbar页面 是则不写
					title: '支付',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#F9F9F9"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
					backPage: '/pages/order/orderList/orderList'
				},
				total_amount: null,
				orderId: null,
				loading: false,
				expired_pay_time: null,
				payStatus: 0,
				balance: 0,
				voucher: null,
				isGroup: false,
				isService: false,
				order_type: 1,
				time1: [0, 0, 0, 0],
				imgUrl: this.$mConfig.staticUrl,
				payMinutes: 0, // 支付剩余分钟数
				payOrder: {}, // 支付单详情
				banksList: [], // 有效银行卡
				card_id: '', // 银行卡id
				showPayModel: false, // 银行卡弹窗
				sms_code: '', // 银行卡支付短信验证码
				codeCount: 60, // 银行卡支付短信验证码重发倒计时
				payment_id: '', // 预支付id,
				showBanksModel: false,
				payS: 2000,
				iPay: 0,
				paymentPage: null, // 入口页面类型
				exchangeType: null,
				bankListData: [], //银行卡列表
				confirmModel: false, //快捷支付确认弹框
				phone: '', //银行卡预留手机号
				bankData: null
			};
		},
		onLoad(options) {
			this.exchangeType = options.exchangeType
			if (options.id) {
				this.orderId = options.id;
			}
			this.$nextTick(() => {
				if (options.paymentPage != null) {
					this.paymentPage = options.paymentPage;
				} else {
					options.paymentPage = null
				}
			})
			if (options.area_feature != 0) {
				this.paymentPage = 'exchange';
			}
			if (options.total_amount) {
				this.total_amount = options.total_amount;
			}
			if (options.expired_pay_time) {
				this.expired_pay_time = options.expired_pay_time;
				this.time1 = this.$mUtil
					.countDown(this.expired_pay_time / 1000)
					.split(':')
					.map(val => Number(val));
				console.log('支付时间：' + options.expired_pay_time);
				let beginTime = new Date();
				let time = options.expired_pay_time - beginTime;
				let leave1 = time % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				//计算相差分钟数
				let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				let minutes = Math.ceil(leave2 / (60 * 1000));
				// this.payMinutes = minutes
				console.log('分钟值:' + minutes);
			}
			if (options.type && options.type == 'group') {
				this.isGroup = true;
			}
			if (options.type && options.type == 'service') {
				this.isService = true;
			}

			this.accountInfo();
			this.returnList();
			console.log('分钟' + this.time1[2]);
			if (this.time1[3] == '0') {
				this.payMinutes = this.time1[2];
			} else {
				this.payMinutes = this.time1[2] + 1;
			}
			console.log('秒值：' + this.time1[3]);
		},
		onShow() {
			this.getBanks()
		},
		onBackPress() {
			if (this.order_type == 1) {
				uni.navigateTo({
					url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
				});
			} else {
				uni.navigateTo({
					url: '/pages/orderList/serviceOrder'
				});
			}
			return true;
		},
		onUnload() {
			clearInterval(timer)
			clearInterval(payTimer)
		},
		methods: {
			returnList() {
				this.$http.get(`/pay/order/sale-detail/${this.orderId}`).then(res => {
					if (res && res.code == 200) {
						this.order_type = res.page.pay_order.order_type;
						this.payOrder = res.page.pay_order;
					}
				});
			},
			accountInfo() {
				this.$http.get('/account/getAccountInfo').then(res => {
					if (res && res.code == 200) {
						this.balance = res.data.balance;
						this.voucher = res.data.voucher;
					}
				});
			},
			payWay(e) {
				console.log(e)
				this.payStatus = e;
				this.showBanksModel = false;
			},
			payBankWay(e, id) {
				this.payStatus = e;
				this.card_id = id
			},
			submitPay() {
				console.log("buttonOn")
				//微信支付
				if (this.payStatus == 1 || this.payStatus == 2 || this.payStatus == 10 || this.payStatus == 12 || this
					.payStatus == 14 || this.payStatus == 16 || this.payStatus == 17) {

					if (this.exchangeType == 'voucher') {
						return this.$mUtil.toast('仅支持兑换券兑换');
					}

					let data = {
						pay_order_id: this.orderId * 1,
						pay_mode: this.payStatus //1微信 2支付宝 0 余额 16 快钱支付宝支付
					};
					// if (this.payStatus == 12) {
					//   let locationObj = uni.getStorageSync('locationObj')
					//   data.longitude = locationObj.longitude.toFixed(4)
					//   data.latitude = locationObj.latitude.toFixed(4)
					// }
					// if (this.payStatus == 14) {
					//   data.card_id = this.card_id
					//   if (!this.card_id) {
					//     if (this.banksList.length) {
					//       return this.$mUtil.toast('请先选择银行卡');
					//     }
					//     return this.$mUtil.toast('请先添加银行卡');
					//   }
					// }
					this.loading = true;
					this.$http.post('/pay/order/pay', data).then(res => {
						if (res && res.data.code == 200) {
							this.loading = false;
							let target = res.data.data;
							console.log('target==>>', target)
							if (this.payStatus == 1) {
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: {
										appid: target.appid,
										noncestr: target.noncestr,
										package: target.package,
										partnerid: target.partnerid,
										prepayid: target.prepayid,
										timestamp: target.timestamp,
										sign: target.sign
									},
									success: res => {
										this.$mUtil.toast('支付成功');
										uni.removeStorageSync('orderreminder');
										setTimeout(() => {
											if (this.isGroup) {
												uni.navigateTo({
													url: '/pages/order/gbOrder/gbOrderList'
												});
											} else if (this.isService) {
												uni.navigateTo({
													url: '/pages/order/orderList/serviceOrder'
												});
											} else {
												uni.navigateTo({
													url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
												});
											}
										}, 1000);
									},
									fail: function(err) {
										this.loading = false;
										console.log('fail:' + JSON.stringify(err));
									}
								});
							} else if (this.payStatus == 2) {
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: target.prePayOrderInfo,

									success: res => {
										this.$mUtil.toast('支付成功');
										uni.removeStorageSync('orderreminder');
										setTimeout(() => {
											if (this.isGroup) {
												uni.navigateTo({
													url: '/pages/order/gbOrder/gbOrderList'
												});
											} else if (this.isService) {
												uni.navigateTo({
													url: '/pages/order/orderList/serviceOrder'
												});
											} else {
												uni.navigateTo({
													url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
												});
											}
										}, 1000);
									},
									fail: function(err) {
										this.loading = false;
										console.log('fail:' + JSON.stringify(err));
									}
								});
							} else if (this.payStatus == 16) {
								console.log("zfbpay")

								kqUniFusedPayApi.alipaySmallProgram({
										'mpayInfo': target
									},
									(ret) => {
										this.$mUtil.toast(ret);
										uni.removeStorageSync('orderreminder');
										setTimeout(() => {
											if (this.isGroup) {
												uni.navigateTo({
													url: '/pages/order/gbOrder/gbOrderList'
												});
											} else if (this.isService) {
												uni.navigateTo({
													url: '/pages/order/orderList/serviceOrder'
												});
											} else {
												uni.navigateTo({
													url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
												});
											}
										}, 1000);
									})
							} else if (this.payStatus == 17) {
								console.log("wxpay")
								kqUniFusedPayApi.wechatSmallProgram({
										'mpayInfo': target
									},
									(ret) => {
										this.$mUtil.toast(ret);
										uni.removeStorageSync('orderreminder');
										setTimeout(() => {
											if (this.isGroup) {
												uni.navigateTo({
													url: '/pages/order/gbOrder/gbOrderList'
												});
											} else if (this.isService) {
												uni.navigateTo({
													url: '/pages/order/orderList/serviceOrder'
												});
											} else {
												uni.navigateTo({
													url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
												});
											}
										}, 1000);
									})
							}
							// else if (this.payStatus == 10) {
							//   // #ifdef APP-PLUS 
							//   setTimeout(() => {
							//     this.showTip()
							//   }, 3000)
							//   if (target.expend) {
							//     this.jumpPay(target.expend.pay_info)
							//   } else if (target.status == 'failed') {
							//     this.$mUtil.toast(target.error_msg);
							//   }
							//   // #endif
							// } else if (this.payStatus == 12) {
							//   // #ifdef APP-PLUS
							//   setTimeout(() => {
							//     this.showTip()
							//   }, 3000)
							//   if (target.qrCode) {
							//     this.jumpPay(target.qrCode)
							//   } else if (target.orderStatus == 'FAIL') {
							//     this.$mUtil.toast(target.respMsg);
							//   }
							//   // #endif
							// } else if (this.payStatus == 14) {
							//   this.showPayModel = true
							//   this.payment_id = target.id
							//   this.codeCount = 10
							//   this.sms_code = ''
							//   timer = setInterval(() => {
							//     this.codeCount--
							//     if (this.codeCount == 0) {
							//       clearInterval(timer)
							//     }
							//   }, 1000)
							//   // setTimeout(() => {
							//   //   // uni.navigateTo({
							//   //   //   url: `/pages/order/banks/mobileCode?type=pay&payment_id=${target.id}`
							//   //   // })
							//   // }, 300)
							// }
						} else {
							this.loading = false;
							this.$mUtil.toast('交易失败');
						}
					}).catch(err => {
						this.loading = false;
						// this.$mUtil.toast('交易失败');
					})
				} else if (this.payStatus == 0) {

					// if(this.exchangeType == 'voucher'){
					// 	return this.$mUtil.toast('仅支持兑换券兑换');
					// }
					//余额支付
					this.loading = false;
					uni.showModal({
						title: '余额支付',
						content: '确定使用余额支付吗？',
						success: res => {
							if (res.confirm) {
								this.$http.post('/order/balance-pay/' + this.orderId).then(res => {
									if (res && res.code == 200) {
										uni.removeStorageSync('orderreminder');
										this.$mUtil.toast('支付成功');
										setTimeout(() => {
											if (this.isGroup) {
												uni.navigateTo({
													url: '/pages/order/gbOrder/gbOrderList'
												});
											} else if (this.isService) {
												uni.navigateTo({
													url: '/pages/order/orderList/serviceOrder'
												});
											} else {
												uni.navigateTo({
													url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
												});
											}
										}, 1000);
									}
								});
							} else if (res.cancel) {}
						}
					});
				} else if (this.payStatus == 19) {
					//兑换券支付
					this.loading = false;
					uni.showModal({
						title: '兑换券支付',
						content: '确定使用兑换券支付吗？',
						success: res => {
							if (res.confirm) {
								this.$http.post('/order/voucher-pay/' + this.orderId).then(res => {
									if (res && res.code == 200) {
										uni.removeStorageSync('orderreminder');
										this.$mUtil.toast('支付成功');
										setTimeout(() => {
											if (this.isGroup) {
												uni.navigateTo({
													url: '/pages/order/gbOrder/gbOrderList'
												});
											} else if (this.isService) {
												uni.navigateTo({
													url: '/pages/order/orderList/serviceOrder'
												});
											} else {
												uni.navigateTo({
													url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
												});
											}
										}, 1000);
									}
								});
							} else if (res.cancel) {}
						}
					});
				} else if (this.payStatus == 21) {
					// 快捷支付
					this.showBanksModel = true
					this.getBankList()
				}
			},
			// 获取银行卡列表
			getBankList() {
				const personal = uni.getStorageSync('personal')
				this.$http.post('/pay/order/getUserBankInfo', {
					userId: personal.mobile
				}).then(res => {
					if (res && res.code == 200) {
						this.bankListData = res.data;
					}
				})
			},
			jumpPay(qrCode) {
				if (qrCode) {
					let url = `alipays://platformapi/startapp?saId=10000007&qrcode=${qrCode}`
					if (plus.os.name == 'iOS') {
						plus.runtime.launchApplication({
							pname: 'com.eg.android.AlipayGphone',
							action: url,
						}, err => {
							console.log("err:" + JSON.stringify(err))
							this.$mUtil.toast('支付跳转失败，请选择其它支付方式');
						});
					} else if (plus.os.name == 'Android') {
						plus.runtime.openURL(url, err => {
							console.log("err:" + JSON.stringify(err))
							this.$mUtil.toast(JSON.stringify(err));
							this.$mUtil.toast('支付跳转失败，请选择其它支付方式');
						}, 'com.eg.android.AlipayGphone');
					}
				}
			},
			showTip() {
				uni.showModal({
					title: '确认支付',
					content: '请确认当前订单是否支付',
					success: (success) => {
						if (success.confirm) {
							console.log('用户点击确定');
							this.$http.get(`/pay/order/sale-detail/${this.orderId}`).then(res => {
								if (res && res.code == 200) {
									uni.removeStorageSync('orderreminder');
									setTimeout(() => {
										if (this.isGroup) {
											uni.navigateTo({
												url: '/pages/order/gbOrder/gbOrderList'
											});
										} else if (this.isService) {
											uni.navigateTo({
												url: '/pages/order/orderList/serviceOrder'
											});
										} else {
											uni.navigateTo({
												url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
											});
										}
									}, 1000);
								}
							});
						} else if (success.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			banksHandler() {
				uni.navigateTo({
					url: `/pages/order/banks/addBankCard?amount=${this.total_amount}&orderId=${this.orderId}`
				})
			},
			getBanks() {
				this.$http.get('/usercard/list?valid=1').then(res => {
					if (res.code == 200) {
						this.banksList = res.list
						this.banksList.map(item => {
							item.logo = this.$mConfig.bankLink + item.local_bank_mark
						})
					}
				})
			},
			retrySms() {
				if (this.codeCount > 0) return this.$mUtil.toast('请稍后重试');
				this.codeCount = 10
				uni.showLoading({
					title: '重发中...',
					mask: true
				})
				this.$http.post('/pay/order/kjRepeatSendSms', {
					payment_id: this.payment_id
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.$mUtil.toast('短信验证码重发成功');
					} else {
						this.$mUtil.toast('服务异常! 请重试');
					}
				}).catch(err => {
					uni.hideLoading()
					// this.$mUtil.toast('服务异常！');
				})
			},
			payConfirm() {
				// this.$refs.payModel.clearLoading()
				if (!this.sms_code) {
					return this.$mUtil.toast('短信验证码不能为空');
				}
				if (this.sms_code.length != 6) {
					return this.$mUtil.toast('短信验证码不正确');
				}
				uni.showLoading({
					title: '支付中...',
					mask: true
				})
				this.$http.post('/pay/order/pay', {
					pay_order_id: this.orderId,
					pay_mode: 20,
					valid_code: this.sms_code
				}).then(res => {
					if (res.code == 200) {
						this.$mUtil.toast("支付成功")
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/order/orderList/orderList?keys=-1'
							})
						}, 1000)
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
					this.loading = false;
					this.showPayModel = false;
					this.$mUtil.toast(res.msg)
				})
			},
			payCancel() {
				this.$mUtil.toast('已取消支付');
				this.loading = false;
			},
			getPayStatus() {
				payTimer = setInterval(() => {
					this.iPay++
					this.lookPayStatus()
					if (this.iPay >= 3) {
						this.loading = false;
						this.showPayModel = false
						uni.hideLoading()
						clearInterval(payTimer)
						uni.redirectTo({
							url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
						})
					}
				}, this.payS)
			},
			lookPayStatus() {
				// this.loading = true;
				this.$http.get(`/pay/order/sale-detail-slim/${this.orderId}`).then(res => {
					if (res.code == 200) {
						if (res.data.payment_status == 5) {
							this.loading = false;
							uni.hideLoading()
							this.showPayModel = false
							this.$mUtil.toast("支付成功")
							clearInterval(payTimer)
							setTimeout(() => {
								uni.redirectTo({
									url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
								})
							}, 500)
						}
					}
				}).catch(err => {
					uni.hideLoading()
					this.loading = false;
				})
			},
			// 快捷支付
			quickPay(data) {
				this.bankData = data;
				this.phone = data.phone;
				this.confirmModel = true;
			},
			// 确认弹框
			confirmPayConfirm() {
				const param = {
					pan: this.bankData.pan,
					userId: this.bankData.user_id,
					amount: this.total_amount,
					payOrderId: this.orderId
				}
				this.$http.post('/pay/order/kqPayApply', param).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.confirmModel = false;
						this.showPayModel = true;
						timer = setInterval(() => {
							this.codeCount--
							if (this.codeCount == 0) {
								clearInterval(timer)
							}
						}, 5000)
					}
				}).catch(err => {
					uni.hideLoading()
					this.loading = false;
					this.confirmModel = false;
					this.$mUtil.toast(res.msg)
				})

			},
			// 取消确认弹框
			confirmPayCancel() {
				this.confirmModel = false;
				// this.$mUtil.toast("取消支付")
			}
		}
	};
</script>

<style lang="scss">
	.mt82 {
		margin-top: 82rpx;
	}

	radio {
		transform: scale(0.7);
	}

	.pay-select {
		margin-top: 66rpx;
		border-radius: 18rpx;
		padding: 48rpx 38rpx;

		.pay {
			font-size: 60rpx;
			color: #ffa937;
		}

		.banks {
			justify-content: center;
		}

		.bank {
			display: flex;
			// flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.box {
				// display: flex;
				// justify-content: space-between;
				// align-items: center;

				&:first-child {
					margin-bottom: 10rpx;
				}

				.left {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
				}

				image {
					width: 80rpx;
					height: auto;
					margin-right: 10rpx;
				}

				.bank_name {
					font-size: 28rpx;
					margin-right: 20rpx;
					// font-weight: bold;
				}

				.name {
					text-align: left;
				}
			}
		}

		.bank-box {
			flex: 1;
			width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.bank-icon {
			color: #2f77f1;
			font-size: 60rpx;
		}
	}

	.img60 {
		width: 50rpx;
		height: 50rpx;
	}

	.pay-btn {
		margin-top: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;

		button {
			width: 635rpx;
			height: 85rpx;
			background: #FF211F;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			color: #ffffff;
			justify-content: center;
			font-weight: 500;
			font-size: 29rpx;
			color: #FFFFFF;
			line-height: 34rpx;
		}
	}

	.paybody {
		padding: 20rpx 30rpx;

		/deep/ .u-input {
			border-bottom: 2rpx solid #dcdfe6;
		}

		.header-text {
			margin-bottom: 20rpx;
		}

		.sms {
			display: flex;
			align-items: center;

			.retry-gary {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180rpx;
				margin-left: 40rpx;
				padding: 20rpx 10rpx;
				background-color: #FF721B;
				border-radius: 10rpx;
				color: #fff;
			}

			.retry {
				background-color: gray;
			}
		}
	}

	.banks-content {
		height: 100%;
		padding: 80rpx 30rpx 0;

		.add {
			position: absolute;
			top: 30rpx;
			left: 30rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #FF721B;
		}

		.header {
			position: absolute;
			top: 30rpx;
			left: 50%;
			font-size: 30rpx;
			font-weight: bold;
			transform: translateX(-50%);
		}

		.no-data-view {
			margin-top: 10vh !important;
		}

		.banks-pay {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 80%;
			position: fixed;
			bottom: 20rpx;
			left: 50%;
			color: #fff;
			border-radius: 10rpx;
			padding: 20rpx 0;
			text-align: center;
			font-size: 30rpx;
			transform: translateX(-50%);
			background-color: #FF721B;

			.txt {
				margin-right: 10rpx;
			}
		}

		.banks {
			width: 100%;
			height: 80%;
			overflow: hidden;

			.scroll-box {
				width: 100%;
				height: 100%;
			}
		}

		.item {
			// height: 100rpx;
			// display: flex;
			// align-items: center;
			display: block;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E6E5E5;

			.box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				&:first-child {
					margin-bottom: 10rpx;
				}

				.bank_name {
					font-size: 30rpx;
					font-weight: bold;
				}
			}

			image {
				width: 200rpx;
				height: auto;
			}

			.bank-icon {
				margin-right: 10rpx;
				color: #2f77f1;
				font-size: 50rpx;
				flex-shrink: 0;
			}

			.name {
				margin-right: 20rpx;
				font-size: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.unbind {
				margin-left: auto;
				color: red;
				flex-shrink: 0;
			}
		}

		.gray {
			color: gray;

			.bank-icon {
				color: gray;
			}
		}
	}

	.full-screen {
		z-index: 1000;
		background-color: rgba(255, 255, 255, 0.5);
	}

	.timeView {
		margin: 0 auto;
		margin-top: 77rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		font-weight: 400;
		font-size: 25rpx;
		color: #FF211F;

		.zhifuView {
			margin-right: 20rpx;
		}
	}

	/deep/.uni-countdown__number {
		font-size: 25rpx;
	}

	.moneyView {
		font-weight: bold;
		font-size: 58rpx;
		color: #FF211F;
		line-height: 58rpx;
		margin-top: 19rpx;
	}

	.payNumber {
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
		line-height: 32rpx;
		margin-top: 19rpx;
	}



	.yuePayView {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;

	}

	.yuePayViewOther {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 608rpx;
		height: 123rpx;

	}

	.yuePayCenter {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.yuePayCenter text:nth-child(1) {
		font-weight: 500;
		font-size: 29rpx;
		color: #000000;
		line-height: 34rpx;
	}

	.yuePayCenter text:nth-child(2) {
		font-weight: 400;
		font-size: 25rpx;
		color: #FF211F;
		line-height: 29rpx;
		margin-top: 12rpx;
	}

	.otherPay {
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 27rpx;
		text-align: left;
		margin-top: 31rpx;
		margin-left: 38rpx;
		margin-bottom: 19rpx;
	}

	.payLabel {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		// width: 712rpx;
		height: 123rpx;
		margin-left: 19rpx;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
	}

	.PayLabelItem {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

	}

	.yuePay {
		width: 712rpx;
		height: 154rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 77rpx;
		margin-left: 19rpx;
		padding-right: 19rpx;
	}

	.yuePay image {
		width: 46rpx;
		height: 46rpx;
	}

	.labelFView {
		width: 711rpx;
		height: 369rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 19rpx;
	}

	.payTwo {
		width: 46rpx;
		height: 46rpx;
		margin-right: 19rpx;
	}

	.payOneImage {
		margin-right: 19rpx;
		margin-left: 19rpx;
	}

	/deep/.uni-radio-input {
		width: 47rpx;
		height: 47rpx;
	}

	.minuteView {
		font-weight: 400;
		font-size: 25rpx;
		color: #999999;
		line-height: 29rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 38rpx;
	}
</style>